.message-item {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;

  &.message-item-right {
    flex-direction: row-reverse;
  }

  &.message-item-left {
    flex-direction: row;
  }

  &.message-item-bot {
    flex-direction: row;
    .message-content {
      .message-bubble {
        background: #f0f7ff;
        border: 1px solid #d9e6ff;
      }
    }
  }

  .message-avatar {
    margin: 0 12px;
  }

  .message-content {
    max-width: 70%;

    &.message-content-right {
      align-items: flex-end;

      .message-bubble {
        background: var(--message-bubble-self);
        color: #fff;
        border: none;

        .message-time {
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }

    &.message-content-left {
      align-items: flex-start;

      .message-bubble {
        background: var(--card-bg);
        color: var(--text-color);
        border: 1px solid var(--border-color);

        .message-time {
          color: var(--message-time-color, rgba(0, 0, 0, 0.45));
        }
      }
    }

    &.message-content-bot {
      align-items: flex-start;

      .message-bubble {
        background: var(--bot-bubble-bg, #f0f7ff);
        color: var(--text-color);
        border: 1px solid var(--bot-bubble-border, #d9e6ff);

        .message-time {
          color: var(--message-time-color, rgba(0, 0, 0, 0.45));
        }
      }
    }

    .message-username {
      font-size: 14px;
      color: var(--text-color);
      margin-bottom: 4px;
      font-weight: 500;
    }

    .message-bubble {
      padding: 12px 16px;
      border-radius: 12px;
      position: relative;
      word-break: break-word;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

      .message-time {
        font-size: 11px;
        margin-top: 4px;
        text-align: right;
      }

      pre {
        background-color: #f0f0f0;
        padding: 8px;
        border-radius: 4px;
        overflow-x: auto;
      }

      code {
        background-color: #f0f0f0;
        padding: 2px 4px;
        border-radius: 4px;
        font-family: monospace;
        font-size: 0.9em;
      }

      .inline-code {
        background-color: #f0f0f0;
        padding: 2px 4px;
        border-radius: 4px;
        font-family: monospace;
        font-size: 0.9em;
      }

      p {
        margin: 0;
        line-height: 1.6;
      }

      ul,
      ol {
        padding-left: 20px;
        margin: 8px 0;
      }

      blockquote {
        border-left: 4px solid #d9d9d9;
        padding-left: 12px;
        margin: 8px 0;
        color: #666;
      }
    }
  }
}

.code-block-wrapper {
  position: relative;
  margin: 16px 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  .code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #343a45;
    padding: 8px 16px;
    border-bottom: 1px solid #3e4451;

    .code-language {
      color: #d7dae0;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1px;
    }

    .copy-icon {
      color: #abb2bf;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.2s ease;

      &:hover {
        color: #ffffff;
        transform: scale(1.1);
      }
    }
  }

  /* 调整行号列的样式 */
  .linenumber {
    min-width: 2.5em;
    color: #636e7b !important;
    border-right: 1px solid #4b5263;
    padding-right: 8px;
    text-align: right;
  }

  /* 微调代码块的每行间距 */
  pre {
    margin: 0 !important;

    span {
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
        monospace !important;
    }
  }
}

.message-bot-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;

  .copy-message-icon {
    color: #8c8c8c;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;

    &:hover {
      color: #1890ff;
      transform: scale(1.1);
    }
  }
}

.message-bot-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid #e8e8e8;
}

.message-tokens {
  font-size: 12px;
  color: #999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .token-detail {
    margin-top: 2px;
    color: #bbb;
    font-size: 11px;
  }
}

.thinking-message {
  font-size: 14px;
  color: #666;
  padding: 8px 0;
  display: flex;
  align-items: center;

  &::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #1890ff;
    border-radius: 50%;
    border-top-color: transparent;
    margin-right: 8px;
    animation: thinking-spin 1s linear infinite;
  }
}

@keyframes thinking-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 添加暗黑模式样式 */
html[data-theme="dark"] {
  .message-item {
    .message-content {
      &.message-content-left,
      &.message-content-bot {
        .message-bubble {
          .message-time {
            color: rgba(255, 255, 255, 0.65);
          }
        }
      }
    }
  }
}

// 添加诗词样式
.poem-content {
  padding: 8px 0;

  .poem-header {
    margin-bottom: 16px;
    text-align: center;

    .poem-title {
      font-size: 18px;
      font-weight: bold;
      color: #1d2129;
      margin-bottom: 8px;
    }

    .poem-author {
      font-size: 14px;
      color: #5c6873;
    }
  }

  .poem-verses {
    margin: 16px 0;

    .poem-verse {
      font-size: 16px;
      line-height: 1.8;
      text-align: center;
      margin: 6px 0;
      color: #2b3440;
      font-family: "STKaiti", "KaiTi", "FangSong", serif;

      p {
        margin: 0;
        text-align: center;
      }

      strong {
        font-weight: bold;
        font-family: "STKaiti", "KaiTi", "FangSong", serif;
      }
    }
  }

  .poem-analysis {
    margin-top: 20px;
    background-color: #f9f9f9;
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 3px solid #b2cfff;

    .analysis-title {
      font-size: 14px;
      font-weight: bold;
      color: #1d2129;
      margin-bottom: 8px;
    }

    .analysis-content {
      font-size: 14px;
      line-height: 1.6;
      color: #4e5969;

      p {
        margin: 0 0 8px 0;
      }

      strong {
        font-weight: bold;
        color: #2b3440;
      }

      ul,
      ol {
        padding-left: 20px;
        margin: 8px 0;
      }
    }
  }
}

// 在深色模式下调整诗词样式
[data-theme="dark"] {
  .poem-content {
    .poem-header {
      .poem-title {
        color: #e8eaed;
      }

      .poem-author {
        color: #a9b2bd;
      }
    }

    .poem-verses {
      .poem-verse {
        color: #d6dae0;
      }
    }

    .poem-analysis {
      background-color: rgba(255, 255, 255, 0.05);
      border-left: 3px solid #5c6980;

      .analysis-title {
        color: #d6dae0;
      }

      .analysis-content {
        color: #a9b2bd;
      }
    }
  }
}
